<template>
  <div>
    <el-container>
      <el-header height="120px">
        <miao-sha-header></miao-sha-header>
      </el-header>
      <el-main>
        <p class="goods_head">秒杀商品详情</p>
          <el-form label-width="150px" label-position="left">
            <el-form-item label="商品名称：">
              {{this.miaoShaGoods.goods.name}}
            </el-form-item>
            <el-form-item label="商品图片：">
              <img :src="getSrcUrl(this.miaoShaGoods.goods.image)"/>
            </el-form-item>
            <el-form-item label="商品原价：">
              {{this.miaoShaGoods.goods.price + '元'}}
            </el-form-item>
            <el-form-item label="商品秒杀价：">
              {{this.miaoShaGoods.price + '元'}}
            </el-form-item>
            <el-form-item label="商品库存：">
              {{this.miaoShaGoods.stock}}
            </el-form-item>
            <el-form-item label="商品秒杀开始时间：">
              {{this.miaoShaGoods.startTime}}
            </el-form-item>
            <el-form-item label="商品秒杀结束时间：">
              {{this.miaoShaGoods.endTime}}
            </el-form-item>
          </el-form>
      </el-main>
      <el-footer>
        <miao-sha-footer></miao-sha-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import MiaoShaHeader from "./common/Header"
import MiaoShaFooter from "./common/Footer"
import axios from "axios";
import { getServerUrl } from "@/config/sys";

export default {
  name: "Detail",
  data() {
    return {
      miaoShaGoods: {
        goods: {
          name: '',
          image: 'default.jpg',
          price: 0
        }
      }
    }
  },
  components: {
    MiaoShaHeader,
    MiaoShaFooter
  },
  methods: {
    getSrcUrl(item) {
      return getServerUrl('image/' + item);
    },
    getInfo() {
      let url = getServerUrl("miaoShaGoods/detail");
      let token = window.sessionStorage.getItem("token");
      axios.defaults.headers.common["token"] = token;
      axios.get(url, {
        params: {
          id: this.$route.params.id
        }
      }).then(response => {
        this.miaoShaGoods = response.data.data;
      }).catch(error => {
        alert(error + "请联系管理员！");
      })
    }
  },
  mounted() {
    this.getInfo();
  }
}
</script>

<style scoped>
  .goods_head {
    font-weight: bold;
    font-size: 20px;
  }
</style>
